<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>简单导航栏的下拉列表实现</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
      
        #nav {
            color: aliceblue;
            width: 130px;
            height: 25px;
            border: 1px solid #c5c5c5;
            /* 边框圆角属性 */
            border-radius: 10px;
            background-color: #797777;
            text-align: center;
            /* text-indent: 5px; */
            font-size: 14px;
            line-height: 25px;
            /* cursor规则是设定网页浏览时用户鼠标指针的样式
            也就是鼠标的图形形状cursor:pointer设定鼠标的形状为一只伸出食指的手 
            读法：美[ˈkɜːrsər ˈpɔɪntər] 游标指针 
             */
            cursor: pointer;
        }

        #down {
            border: 1px solid #c5c5c5;
            width: 115px;
            margin-left: 5px;
            display: none;
        }

        ul {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            font-size: 14px;
            border-bottom: 1px dashed #c5c5c5;
            text-align: center;
            height: 25px;
            line-height: 25px;
            color: aliceblue;
            background-color: #333;
            cursor: pointer;
        }

        a {
            text-decoration: none;
        }

        li:hover {
            background-color: #5c0e0e;
        }
    </style>
</head>

<body>
    
        <div id="nav">请选择相应官方网站</div>
        <div id="down">
            <ul>
                <a href="http://www.baidu.com">
                    <li>百度</li>
                </a>
                <a href="http://www.mi.com">
                    <li>小米官网</li>
                </a>
                <a href="http://www.oppo.com">
                    <li>oppo官网</li>
                </a>
                <a href="http://www.vivo.com">
                    <li>vivo官网</li>
                </a>
                <a href="http://www.jd.com">
                    <li>京东官网</li>
                </a>
                <a href="http://www.taobao.com">
                    <li>淘宝官网</li>
                </a>
            </ul>
        </div>
   
</body>

</html>
<script>
    //获取相关dom结构
   
    var nav = document.getElementById("nav");
    var down = document.getElementById("down");
    var lis = document.querySelectorAll("li");
    // console.log(lis);
    var timer;
    //当鼠标经过nav时，呈现出下拉列表的内容，给个延时效果
   nav.onmouseover = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            down.style.display = "block";
        }, 300);

        // 选中列表中的某一项并将其呈现在nav中,隐藏下拉列表
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                //nav.innerHTML = this.innerHTML;
                down.style.display = "none";
                clearInterval(timer);
            }
        }
    }
  
</script>